<template>
  <div class="app-container">
    <div class="search-container"> 
      <el-row  type="flex" :gutter="10" justify="space-between">
        <el-col :span="6">
          <label class="search-option-label">标题</label>
          <el-input v-model="listQuery.title" class="select-item" placeholder="请输入" style="width: 180px;" ></el-input>
        </el-col>
        <el-col :span="12">
          <label class="search-option-label">日期</label>
            <el-date-picker
              value-format="timestamp"
              v-model="date_group"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
        </el-col>
        <el-col :span="6">
          <label class="search-option-label">状态</label>
          <el-select v-model="listQuery.status" placeholder="请选择">
            <el-option
              v-for="item in bulletin_status_options"
              :key="item.key"
              :label="item.display_name"
              :value="item.key">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="10" justify="end" >
        <el-col :span="2">
          <el-button size="mini" type="primary" icon="el-icon-search" @click="handleFilter" round>搜索</el-button>
        </el-col>  
        <el-col :span="2">
          <el-button size="mini" type="primary" icon="el-icon-refresh" @click="clearOptions" round>清空</el-button>
        </el-col>
        <el-col v-if="hasRoles(['BULLETIN_INFO_UPDATE', 'SUPER_ADMIN'])" :span="2">
          <el-button size="mini" type="primary" icon="el-icon-plus" @click="addItem" round>新增</el-button>
        </el-col>
      </el-row>  
    </div>
    <el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">

      <el-table-column min-width="300px" label="标题">
        <template slot-scope="scope">
          <router-link class="link-type" :to="'/dashboard/bulletinBoard/item/detail/'+scope.row.id">
            <span>{{ scope.row.title }}</span>
          </router-link>
        </template>
      </el-table-column>

      <el-table-column width="180px" align="center" label="日期">
        <template slot-scope="scope">
          <span>{{scope.row.create_date | timeFilter('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" label="状态" width="110">
        <template slot-scope="scope">
          <el-tag >{{ scope.row.status | bulletinStatusFilter}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column v-if="hasRoles(['BULLETIN_INFO_UPDATE', 'SUPER_ADMIN'])" align="center" label="操作" width="240">
        <template slot-scope="scope">
          <router-link :to="'/dashboard/bulletinBoard/item/'+scope.row.id">
            <el-button type="primary" size="small" icon="el-icon-edit">编辑</el-button>
          </router-link>
          <el-button type="primary" size="small" icon="el-icon-delete" @click="handelDel(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current_page"
        :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import API from '@/utils/backend_api'
import Static_Data from '@/data/index'
export default {
  name: 'bulletinBoard',
  data() {
    return {
      current_user_roles: this.$store.getters.roles,
      bulletin_status_options: Static_Data.bulletin_status,
      list: null,
      total: 0,
      listLoading: true,
      current_page: 1,
      date_group: '',
      listQuery: {
        page: 1,
        limit: 10,
        offset: 0,
        title: '',
        start_date: '',
        status: '',
        end_date: '',
        sort: '-create_date'
      },
      postForm: {}
    }
  },
  filters: {
  },
  created() {
    this.getList()
  },
  methods: {
    hasRoles(roles) {
      return this.current_user_roles.some(item => roles.indexOf(item) >= 0)
    },
    addItem() {
      this.$router.push({ path: '/dashboard/bulletinBoard/new_item' })
    },
    getList() {
      this.listLoading = true
      API.bulletin.all(this.listQuery).then(response => {
        this.list = response.data
        if (response.headers && response.headers['x-total-count']) {
          this.total = Number(response.headers['x-total-count'])
        }
        this.listLoading = false
      })
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handelDel(data) {
      API.bulletin.delete(data.id).then(reponse => {
        for (const v of this.list) {
          if (v.id === reponse.data.id) {
            const index = this.list.indexOf(v)
            this.list.splice(index, 1, reponse.data)
            break
          }
        }
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
      }).catch(err => {
        console.log(err)
      })
    },
    handleFilter() {
      if (this.date_group && this.date_group !== '' && this.date_group.length === 2) {
        this.listQuery.start_date = this.date_group[0]
        this.listQuery.end_date = this.date_group[0]
      } else {
        this.listQuery.start_date = ''
        this.listQuery.end_date = ''
      }

      this.getList()
    },
    clearOptions() {
      this.date_group = ''
      this.listQuery = {
        page: 1,
        limit: 10,
        offset: 0,
        title: '',
        start_date: '',
        end_date: '',
        status: '',
        sort: '-create_date'
      }
    },
    handleCurrentChange(val) {
      if (val >= 1) {
        this.current_page = val
        this.listQuery.offset = (val - 1) * this.listQuery.limit
        this.getList()
      }
    }
  }
}
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.search-container{
  display: block;
  /* border: 1px solid #ebebeb; */
  margin: 2px 2px 2px 2px;
}
.search-option-label {
  margin-left: 20px;
}
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
